import React from 'react'

interface TestRunnerProps {
  onClose?: () => void
  style?: React.CSSProperties
}

const TestRunner: React.FC<TestRunnerProps> = ({ onClose, style }) => {
  return (
    <div
      style={{
        background: '#fff',
        border: '1px solid #e5e7eb',
        borderRadius: 8,
        boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
        width: 420,
        padding: 16,
        ...style,
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3 style={{ margin: 0 }}>性能测试面板</h3>
        <button
          onClick={onClose}
          style={{
            background: '#f5f5f5',
            border: '1px solid #d9d9d9',
            borderRadius: 6,
            padding: '6px 10px',
            cursor: 'pointer'
          }}
        >关闭</button>
      </div>

      <div style={{ marginTop: 12, color: '#666', fontSize: 13 }}>
        这是一个占位的测试面板。实际测试内容可以在这里扩展，如：
        <ul style={{ marginTop: 8 }}>
          <li>语音识别延迟与成功率</li>
          <li>AI回复生成耗时</li>
          <li>TTS合成与播放耗时</li>
          <li>网络请求与WebSocket状态</li>
        </ul>
      </div>
    </div>
  )
}

export default TestRunner